<head>
    <title>前程机票</title>
    <style>
        body {
            background-image: url(8179295_094615563102_2.jpg);
        }
        
        #top1 {
            font-size: 50px;
            font-family: "新宋体";
        }
        
        .top2 {
            margin: 10px auto;
            width: 80%;
            background-color: #FFFFFF;
        }
        
        #top3 {
            background-color: #3366CC;
        }
        
        #fsize {
            font-size: 19px;
        }
        
        #bor {
            margin: 10px auto;
            border: 1px solid black;
            width: 80%;
        }
        
        #p1 {
            padding-left: 1cm;
        }
        
        #p2 {
            padding-left: 20cm;
        }
    </style>


    <script type="text/javascript">
        function check1() {
            var nameValue1 = document.getElementById("user1").value;
            if (nameValue1 == '') {
                document.getElementById("n1").style.display = "inline";
            }
        }

        function check2() {
            var nameValue2 = document.getElementById("user2").value;
            if (nameValue2 == '') {
                document.getElementById("n2").style.display = "inline";
            }
        }

        function check3() {
            var nameValue3 = document.getElementById("user3").value;
            if (nameValue3 == '') {
                document.getElementById("n3").style.display = "inline";
            }
        }

        function check4() {
            var psValue = document.getElementById("user4").value;
            if (isNaN(psValue) || psValue == "") {
                document.getElementById("n4").style.display = "inline";
            }
        }

        function check5() {
            var psValue = document.getElementById("user5").value;
            if (isNaN(psValue) || psValue == "" || psValue.length != 11) {
                document.getElementById("n5").style.display = "inline";
            }
        }

        function check6() {
            var psValue = document.getElementById("user6").value;
            if (isNaN(psValue) || psValue == "" || psValue.length != 11) {
                document.getElementById("n6").style.display = "inline";
            }
        }

        function check7() {
            var psValue = document.getElementById("user7").value;
            if (isNaN(psValue) || psValue == "") {
                document.getElementById("n7").style.display = "inline";
            }
        }

        function check8() {
            var psValue = document.getElementById("user8").value;
            if (isNaN(psValue) || psValue == "") {
                document.getElementById("n8").style.display = "inline";
            }
        }

        function addDiv() {
            var s1 = document.getElementById('bor');
            var divitm = document.createElement("div");
            divitm.innerHTML =
                "<div><hr/><p id ='p1'>请输入乘机人：<input id='user2' type='text' onclick='check2()'/><span id='n2' style='display:none;color:#f00;'> 用户名不能为空</span><br /></p><hr/><p id ='p1'>购票类型：<select name=;'type' style='width:150px; height:25px;'><option value='成人票' >成人票</option><option value='残疾票'>残疾票</option><option value='儿童票'>儿童票</option></select>￥2000/成人（含税费）</p><p id='p1'> 姓 &emsp; 名 ：<input type='text' size='17'/></p><p id='p1'>证件类型：<select name='证件' style='width:150px; height:25px;'><option value='居民身份证' >居民身份证</option><option value='护照'>护照</option><option value='居民暂住证'>居民暂住证</option></select></p><p id='p1'>证件号码：<input type='text' size='17'/></p></div>"
            s1.appendChild(divitm);
        }
    </script>
</head>

<body>
    <p id='top1' style="color:white;">联盟机票</font>
    </p>
    <div class='top2'>
        <p>
            <h2><a href="http://www.dlnu.edu.cn/">机票预订</a></h2>
        </p>
        <p>
            <hr />
        </p>
        <div>
            <h3 id='top3'>航班信息</h3>
            <p>&emsp;&emsp;航空公司 &emsp;MK7777 &emsp;
                <a href="http://www.dlnu.edu.cn/">[修改航班]</a>&emsp;<a href="http://www.dlnu.edu.cn/">[退改签]</a>&emsp;&emsp;2017年1月10日&nbsp;11:00&emsp; 周水子机场--起飞
                <br>&emsp;&emsp;飞机机型 &emsp;730 &nbsp;经停 &emsp;<a href="http://www.dlnu.edu.cn/">[修改航班]</a> &emsp; &emsp; &emsp; &emsp; &emsp;2017年1月10号&nbsp;10:00&emsp;白云机场--降落</p>
            <hr/>
        </div>

        <div>
            <p id='top3'><span id='fsize'><B>乘客信息</B></span>
                <span><font color="red">请填写乘客信息（姓名，证件号码),以免在办理手续的过程中出现问题</font></span></p>
                <p id='p1'>在常用姓名中选择<input type="text" />
                    <input name="刘" type="checkbox" value="刘某某" onClick="addDiv()" />刘某某
                    <input name="张" type="checkbox" value="" onClick="addDiv()" />张某某
                    <input name="王" type="checkbox" value="" onClick="addDiv()" />王某某
                    <input name="李" type="checkbox" value="" onClick="addDiv()" />李某某</p>
        </div>
        <div id='bor'>
            <div>
                <p id='p1'>请输入乘机人：<input id="user1" type="text" onClick="check1()" />
                    <span id="n1" style="display:none;color:#f00;"> 用户名不能为空</span><br />
                    <hr/>
                    <p id='p1'>购票类型：<select name="types" style="width:150px; height:25px;">
    <option value="成人票" >成人票</option>
    <option value="残疾票">残疾票</option>
    <option value="儿童票">儿童票</option></select>￥2000/成人（含税费）</p>
                    <p id='p1'> 姓 &emsp; 名 ：<input type="text" size="17" /></p>
                    <p id='p1'>证件类型：<select name="证件" style="width:150px; height:25px;">
    <option value="居民身份证" >居民身份证</option>
    <option value="护照">护照</option>
    <option value="居民暂住证">居民暂住证</option></select></p>
                    <p id='p1'>证件号码：<input type="text" size="17" /></p>
            </div>
        </div>
        <p id='p2'><input type="button" value="增加乘客" onClick="addDiv()" id="Add" /></p>
        <p id='top3'><span id='fsize'><B>联系人信息</B></span>
            <span><font color="red">请正确填写联系人信息（联系人，手机号码，E-mail），以便我们向您联系</font></span></p>


        <div id='bor'>
            <p id='p1'>联 系 人：<input id="user3" type="text" size="17" onclick="check3()" />
                <span id="n3" style="display:none;color:#f00;"> 用户名不能为空</span></p>
            <p id='p1'>手机号码：<input id="user4" type="text" size="17" onclick="check4()" />
                <span id="n4" style="display:none;color:#f00;"> 号码必须为数字</span></p>
            <p id='p1'>联系号码：<input id="user5" type="text" size="17" onMouseOut="check5()" />
                <span id="n5" style="display:none;color:#f00;"> 格式错误</span></p>
            <p id='p1'>传真号码：<input id="user6" type="text" size="17" onMouseOut="check6()" />
                <span id="n6" style="display:none;color:#f00;"> 格式错误</span></p>
            <p id='p1'> E-mail ：<input id="user7" type="text" size="17" onMouseOut="check7()" />
                <span id="n7" style="display:none;color:#f00;"> 注意邮箱地址</span></p>
            <p id='p1'>联系地址：<input id="user8" type="text" size="17" onclick="check8()" />
                <span id="n8" style="display:none;color:#f00;"> 地址不能为空</span></p>
        </div>
    </div>
</body>

</html>